<template>
    <Card :bordered="false" dis-hover class="ivu-mt">
        <Row>
            <Col :xl="{span: 12, offset: 6}" :lg="{span: 12, offset: 6}" :md="{span: 16, offset: 4}"
                 :sm="{span: 20, offset: 2}" :xs="24">
                <Form ref="form" :model="data" :rules="rules" class="ivu-mt" :label-width="labelWidth"
                      :label-position="labelPosition">
                    <FormItem label="报销金额：" prop="reimCount" label-for="reimCount">
                        <Input v-model="data.reimCount" placeholder="请输入金额（必填）" element-id="reimCount"/>
                    </FormItem>

                    <FormItem label="报销类别：" prop="reimType" label-for="reimType">
                        <Select v-model="data.reimType" placeholder="请选择报销类别" element-id="reimType">
                            <Option value="1">差旅费</Option>
                            <Option value="2">交通费</Option>
                            <Option value="3">办公用品</Option>
                            <Option value="4">运输费</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="报销理由（明细）：" prop="reimReson" label-for="reimReson">
                        <Input  type="textarea" :rows="4"  v-model="data.reimReson" placeholder="请输入费用明细描述" element-id="reimReson"/>
                    </FormItem>
                    <FormItem>
                        <Button class="ivu-ml" @click="handleReset(data)">取消</Button>
                        <Button class="ivu-ml" type="primary" :loading="loading" @click="handleSubmit">确定</Button>
                    </FormItem>
                </Form>
            </Col>
        </Row>
    </Card>

</template>

<script>
    import reimbursement from "@/api/finance-reimbursement";

    export default {
        data() {
            return {
                trafficType: '',
                formItem: {
                    checkbox: [],
                },
                data: {
                    reimCount: '',
                    reimType: '',
                    reimReson: '',
                },
                loading: false,
                rules: {
                    reimCount: [
                        {required: true, message: '请输入报销金额', trigger: 'blur'}
                    ],
                    reimType: [
                        {required: true, message: '请选择报销类别', trigger: 'change'}
                    ],
                    reimReson: [
                        {required: true, message: '请输入报销理由以及明细', trigger: 'blur'}
                    ],
                },
            }
        },
        computed: {
            labelWidth() {
                return this.isMobile ? undefined : 140;
            },
            labelPosition() {
                return this.isMobile ? 'top' : 'left';
            }
        },
        created() {
            let baseData = this.$route.params.item;
            let myIndex = this.$route.params.myIndex;
            console.log(myIndex);
            //是否编辑渲染
            if (myIndex) {
                this.data.contractId = baseData.positionName;
                this.data.mechanismOwner = baseData.mechanismOwner;

            }
        },
        methods: {


            // T和Z时间转换
            changeDate(oldDate) {
                var dateee = new Date(oldDate).toJSON();//这个ie不兼容，会返回1970年的时间
                var date = new Date(+new Date(dateee) + 8 * 3600 * 1000)
                    .toISOString()
                    .replace(/T/g, " ")
                    .replace(/\.[\d]{3}Z/, "");
                return date;
            },

            //新增
            handleSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        reimbursement.insertReimbursement({
                            userId:this.$store.state.admin.user.info.userId,
                            nickName:this.$store.state.admin.user.info.nickName,
                            reimCount: this.data.reimCount,
                            reimType: this.data.reimType,
                            reimReson: this.data.reimReson,
                        })
                            .then(res => {
                                // 返回数据
                                this.loading = false;
                                this.$Message.success('申请成功');
                                this.$router.push('/finance/reimbursement')
                            })
                            .catch(err => {
                                // 异常情况

                            })
                    } else {
                        this.loading = false;
                    }
                });
            },
            // 新增数据
            handleCreate() {
                this.$refs.create.validate((valid) => {
                    if (valid) {
                        if (this.updateIndex < 0) {
                            // 新建
                            const mockData = this.mockOneData();
                            mockData.desc = this.createData.desc;
                            mockData.date = new Date();
                            this.list.splice(0, 0, mockData);
                            this.$Message.success('创建成功');
                        } else {
                            // 修改
                            const updateItemName = this.dataWithPage[this.updateIndex].name;
                            const updateItemIndex = this.list.findIndex(item => item.name === updateItemName);
                            this.list[updateItemIndex].desc = this.createData.desc;
                            this.$Message.success('修改成功');
                        }

                        this.showCreate = false;
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    } else {
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    }
                });
            },
            //取消
            handleReset(name) {
                this.$router.push('/finance/reimbursement')
            },

        }

    }
</script>

<style scoped>

</style>
